<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>流浪猫收容系统</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <%@include file="../common.jsp"%>

</head>

<body style="background: #e0dbd6">
<%--    <c:forEach items="${data}" var="goodsType">&ndash;%&gt;--%>
<%--        <option value="${goodsType.id}">${goodsType.typeName}</option>--%>
<%--    </c:forEach>--%>
    <%--搜索框--%>
    <fieldset class="table-search-fieldset">
        <legend>搜索信息</legend>
        <div style="margin: 5px -5px -5px -5px">
            <form class="layui-form layui-form-pane" action="">
                <div class="layui-form-item" style="align-content: center">
                    <div class="layui-inline" style="width: 20%;">
                        <label class="layui-form-label" style="width: 30%;">姓名</label>
                        <div class="layui-input-inline" style="width: 65%;">
                            <input id="name" type="text" name="name" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 20%;">
                        <label class="layui-form-label" style="width: 28%;">性别</label>
                        <div class="layui-input-inline" style="width: 65%;">
                            <select id="sex" name="sex">
                                <option value="" selected></option>
                                <option value="1">公</option>
                                <option value="2">母</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 20%;">
                        <label class="layui-form-label" style="width: 28%;">年龄</label>
                        <div class="layui-input-inline" style="width: 65%;">
                            <input id="age" type="number" name="age" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline" style="width: 8%;">
<%--                        <button onclick="search()" style="width: 100%" class="layui-btn layui-btn-primary"><i class="layui-icon"></i> 搜 索</button>--%>
                        <button  type="submit" style="width: 100%" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
<%--    onclick="search()"--%>
                    </div>

                </div>
            </form>
        </div>
    </fieldset><br>

    <%--响应式卡面面板--%>
    <div id="cardboard" class="layui-bg-gray" style="padding: 2%; background: #63534d !important; border-radius: 2%;" >
        <div class="layui-row layui-col-space15" style="background: #e0dbd6;  border-radius: 2%;" >

            <c:forEach items="${data}" var="cat">
                <c:if test="${cat.isAdop!=1}">
                    <div id="${cat.id}" class="layui-col-md6" style="width: 25%;">
                        <div class="layui-card" style="border-radius: 5%; height: 360px " >
                            <div class="layui-card-body" style="height: 290px" >
                                <img src="${cat.photo1}" style="width: 100%;height: 100%; border-radius: 4%;">
                            </div>

                            <div class="layui-card-header" style="text-align: center; border: 0; border-radius: 100%;  font-size: 20px; color: #63534d;">${cat.name} - ${cat.age}岁 -

                                <c:if test="${cat.sex==1}">公</c:if>
                                <c:if test="${cat.sex==2}">母</c:if>
                            </div>
                        </div>
                    </div>
                </c:if>
            </c:forEach>

        </div>
    </div>

<script>
    <%--图片的鼠标点击事件--%>
    $(document).ready(function(){
        $(".layui-col-md6").click(function (data){
            var index = layer.open({
                title: '详细信息',
                type: 2,
                shade: 0.2,
                maxmin:true,
                shadeClose: true,
                area: ['100%', '100%'],
                content: '<c:url value="/cat/toDetail.do" />' + "?id=" +this.id,
            });
            $(window).on("resize", function () {
                layer.full(index);
            });
        });
    });

    //搜索操作
    // function search(){
    //
    //     var name = document.getElementById("name").value;
    //     var sex = document.getElementById("sex").value;
    //     var age = document.getElementById("age").value;
    //     $.ajax({
    //         "url": base_url + "cat/getCatList.do",
    //         headers: {
    //             'Content-Type': 'application/json'
    //         },
    //         "data": {
    //             "name": name,
    //             "age": age,
    //             "sex": sex,
    //         },
    //         "method": "post",
    //         success: function () {
    //
    //         },
    //         error: function () {
    //             layer.alert("222");
    //         }
    //     });
    // }


    layui.use(['form', '#cardboard'], function () {

        var $ = layui.jquery,
            form = layui.form,
            cardboard = $("#cardboard");
        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            alert(11111)
            //执行搜索重载
            cardboard.reload('#cardboard', {
                page: {
                    curr: 1
                }
                , where: data.field
            }, 'data');
            return false;
        });
    });

</script>



</body>
</html>